<template>
  <div id="home">
<!--    <img src="../../assets/img/login/logo.png" style="width: 11%;margin: 25px;float: right">-->
<!--    <img src="../../assets/img/login/GLY.png" style="width: 50%;margin: 6% 0 0 5%">-->
    <img src="/img/GLY1.png" style="width: 35%;margin: -7% 0 0 10%">
    <n-card content-style="padding: 5" >
      <n-h2>职来运转|管理员登录</n-h2>
      <a-divider class="half-divider" />
      <a-form  :style="{width:'100%'}" style="float: right;" auto-label-width :size="'large'">
        <a-form-item style="margin-bottom: 10%;margin-top: 10%">
          <a-input placeholder="请输入您的账号" v-model="userLogin.username"/>
        </a-form-item>
        <a-form-item>
          <a-input
              type="password"
              show-password-on="mousedown"
              :maxlength="8"
              v-model="userLogin.password"
              placeholder="请输入您的密码"/>
        </a-form-item>
        <a-form-item>
          <a-checkbox>
            我已阅读并同意相关管理员保密协议
          </a-checkbox>
        </a-form-item>
        <a-form-item>
          <a-button class="baa" html-type="submit" style="color:#ffffff;" @click="login()"shape="round">登录/注册</a-button>
        </a-form-item>
      </a-form>
    </n-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import {ElMessage} from "element-plus";
import router from "@/router";

// 定义一个用于接收用户信息的数组
const userLogin = ref({
  username: '',
  password: ''
});

const login = ()=>{
  if(userLogin.value.username=='admin' && userLogin.value.password=='admin'){
    ElMessage.success("登陆成功~");
    router.push('/');
  }else{
    let data = JSON.stringify(userLogin.value);
    axios.post(BASE_URL + '/v1/company/login', data, {
      headers: {
        'Content-Type': 'application/json'
      }
    })
        .then((response) => {
          if (response.data.code === 2000) {
            ElMessage.success("登陆成功~");
            console.log(response.data.data);
            localStorage.setItem("user",JSON.stringify(response.data.data));
            router.push('/Ccompany');
          } else {
            ElMessage.error(response.data.msg);
          }
        })
        .catch((error) => {
          console.error("登录失败：", error);
          ElMessage.error("登录失败，请稍后再试");
        });
  }
}

</script>


<style scoped>
#home{
  width: 100%;
  min-height: 100vh;
  font-size: 3%;
  background: url('~@/assets/GLDL.jpg')center ;
  background-size: 100% 100%;
}
.n-card{
  width: 30%;
  height: 400px;
  position: absolute;
  left: 50%;
  top:50%;
  background-color:#ffffff;
  transform: translate(30%,-50%);
  border: rgba(245, 245, 245, 0.97);
  border-radius:2%;
}
.n-h2{
  color: rgba(79, 18, 79, 0.99);
  width: 60%;
  height: 10%;
  margin: 0 0 0 24% ;
  font-size: 150%;
  font-weight: bold;
  font-family: Microsoft YaHei;
}
button{
  background: linear-gradient(90deg, rgb(103, 33, 122), rgb(108, 66, 149));/*渐变颜色*/
  font-family: Microsoft YaHei;
  width: 35%;
  height: 35px;
  margin: 0 auto;
  transition: transform .2s; /* 动画 */
  :deep(.el-button__wrapper) {
    border-radius: 5px; /* 设置圆角半径 */
    cursor: default;
    .el-button__inner {
      cursor: default !important;
    }
  }
}
.baa:hover{
  background: linear-gradient(45deg, #612e94, #70218a);
  transform: scale(1.2); /* （120% 缩放按钮动态*/
}
</style>